import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
const service = axios.create({
  // process.env是nodejs内置的固定环境变量对象
  // npm run serve->启动开发服务
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    const token = store.getters.token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}` // 后台解析的方法要求前面拼接Bearer
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // console.log(router)
    // 成功和失败的状态码都是200，用sucess区分
    // data字段才是后台返回的全部数据（也是一个对象）
    // 第一个data axios自带的
    // 第二个data 后台返回数据对象的
    const { success, message } = response.data
    if (success) {
      return response.data
    } else { // 逻辑失败，把后台返回的message提示文字返回到逻辑页面  Promise.reject状态（await无法接收，如果有try+catch进catch）
      Message.error(message)
      return Promise.reject(message)
    }
  },
  error => {
    // console.dir(error)
    // 4XX的响应状态，如果后台返回了响应数据，用一下
    Message.error(error.response && error.response.data && error.response.data.message || error.message)
    if (error?.response?.data?.code === 10002) { // 10002代表token过期
      // ?.新版语法（可选链操作符）左侧有值才会继续往下去点属性
      // 1.清楚token（vuex和本地都得清除）
      // 2.清除用户信息（vuex里存的）
      // 3.重新回到登录页,被动退出时，把所在页面的路由地址字符串传递给登录页面
      store.dispatch('user/logoutActions')
      router.replace(`/login?redirect=${router.currentRoute.fullPath}`)
    }
    return Promise.reject(error)
  }
)

export default service
